<template>
  <div class="container">
    <!-- 搜索区域 -->
    <div class="search-card">
      <el-input
        v-model="searchForm.tableNo"
        placeholder="输入桌号搜索"
        class="search-input"
        clearable
        @keyup.enter="handleFilter"
      >
        <template #prefix>
          <el-icon><Search /></el-icon>
        </template>
      </el-input>
      <el-button type="primary" @click="handleFilter">搜索</el-button>
      <el-button @click="resetSearch">重置</el-button>
    </div>

    <!-- 操作区域 -->
    <div class="action-card">
      <el-button type="primary" @click="openDialog('add')" class="add-btn">
        <el-icon><Plus /></el-icon>新增桌位
      </el-button>
    </div>

    <!-- 数据表格 -->
    <div class="table-card">
      <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%"
        height="calc(100vh - 220px)"
        v-loading="loading"
        :header-cell-style="{
          background: '#f8f9fa',
          color: '#606266',
          fontWeight: 600
        }"
      >
        <el-table-column
          type="selection"
          width="50"
          align="center"
          fixed="left"
        />

        <el-table-column
          type="index"
          label="序号"
          width="80"
          align="center"
          fixed="left"
        />

        <!-- 桌号 -->
        <el-table-column
          prop="tableNo"
          label="桌号"
          min-width="120"
          align="center"
          show-overflow-tooltip
        />

        <!-- 容量 -->
        <el-table-column
          label="容量"
          min-width="140"
          align="center"
        >
          <template #default="{row}">
            <span class="capacity">{{ row.capacity }}人位</span>
          </template>
        </el-table-column>

        <!-- 状态 -->
        <el-table-column
          label="状态"
          min-width="150"
          align="center"
        >
          <template #default="{row}">
            <el-tag
              :type="statusMap[row.status].type"
              effect="light"
              class="status-tag"
            >
              {{ statusMap[row.status].text }}
            </el-tag>
          </template>
        </el-table-column>

        <!-- 创建时间 -->
        <el-table-column
          label="创建时间"
          min-width="200"
          align="center"
        >
          <template #default="{row}">
            <time-label :value="row.createTime" />
          </template>
        </el-table-column>

        <!-- 最后使用 -->
        <el-table-column
          label="最后使用"
          min-width="200"
          align="center"
        >
          <template #default="{row}">
            <time-label :value="row.lastUsedTime" fallback="-" />
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column
          label="操作"
          width="180"
          fixed="right"
          align="center"
        >
          <template #default="{row}">
            <el-button
              type="primary"
              size="small"
              @click="openDialog('edit', row)"
            >编辑</el-button>
            <el-button
              type="danger"
              size="small"
              @click="handleDelete(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-card">
      <el-pagination
        background
        :page-sizes="[10, 20, 50]"
        :total="pagination.total"
        v-model:current-page="pagination.page"
        v-model:page-size="pagination.limit"
        layout="total, sizes, prev, pager, next, jumper"
      />
    </div>

    <!-- 表单对话框 -->
    <el-dialog
      v-model="dialog.visible"
      :title="dialog.mode === 'add' ? '新增桌位' : '编辑桌位'"
      width="500px"
    >
      <el-form :model="formData" label-width="100px">
        <el-form-item label="桌号" required>
          <el-input v-model="formData.tableNo" />
        </el-form-item>
        <el-form-item label="容量" required>
          <el-input-number
            v-model="formData.capacity"
            :min="2"
            :max="12"
            controls-position="right"
          />
        </el-form-item>
        <el-form-item label="状态" required>
          <el-select v-model="formData.status">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialog.visible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import dayjs from 'dayjs'

// 状态配置
const statusMap = {
  0: { text: '空闲', type: 'success' },
  1: { text: '使用中', type: 'danger' },
  2: { text: '已预订', type: 'warning' }
}

const statusOptions = [
  { value: 0, label: '空闲' },
  { value: 1, label: '使用中' },
  { value: 2, label: '已预订' }
]

// 模拟数据
const mockData = [
  {
    id: 1,
    tableNo: 'A01',
    capacity: 4,
    status: 0,
    createTime: '2023-11-01 14:30:45',
    lastUsedTime: '2023-11-05 19:15:22'
  },
  {
    id: 2,
    tableNo: 'B02',
    capacity: 6,
    status: 1,
    createTime: '2023-11-02 09:12:35',
    lastUsedTime: null
  },
  {
    id: 3,
    tableNo: 'C03',
    capacity: 8,
    status: 2,
    createTime: '2023-11-03 16:45:10',
    lastUsedTime: '2023-11-04 20:30:00'
  }
]

// 响应式数据
const loading = ref(false)
const searchForm = reactive({ tableNo: '' })
const tableData = ref([...mockData])
const pagination = reactive({
  page: 1,
  limit: 10,
  total: mockData.length
})

const dialog = reactive({
  visible: false,
  mode: 'add'
})

const formData = reactive({
  id: null,
  tableNo: '',
  capacity: 4,
  status: 0
})

// 时间格式化组件
const TimeLabel = {
  props: ['value', 'fallback'],
  setup(props) {
    return () => props.value
      ? dayjs(props.value).format('YYYY-MM-DD HH:mm:ss')
      : props.fallback || '--'
  }
}

// 方法
const handleFilter = () => {
  tableData.value = mockData.filter(item =>
    item.tableNo.includes(searchForm.tableNo)
  )
}

const resetSearch = () => {
  searchForm.tableNo = ''
  handleFilter()
}

const openDialog = (mode, row) => {
  dialog.mode = mode
  dialog.visible = true
  if (mode === 'edit') {
    Object.assign(formData, row)
  } else {
    formData.id = null
    formData.tableNo = ''
    formData.capacity = 4
    formData.status = 0
  }
}

const submitForm = () => {
  if (!formData.tableNo) {
    ElMessage.error('请输入桌号')
    return
  }
  dialog.visible = false
  ElMessage.success('操作成功')
}

const handleDelete = (id) => {
  ElMessageBox.confirm('确认删除该桌位？', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    tableData.value = tableData.value.filter(item => item.id !== id)
    ElMessage.success('删除成功')
  })
}

onMounted(() => {
  handleFilter()
})
</script>

<style scoped>
.container {
  height: 100vh;
  width: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  background: #f5f7fa;
  box-sizing: border-box;
}

.search-card {
  background: #fff;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 12px;
  display: flex;
  gap: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);

  .search-input {
    flex: 1;
    max-width: 400px;
  }

  .el-button {
    padding: 8px 16px;
  }
}

.action-card {
  background: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);

  .add-btn {
    padding: 8px 16px;
  }
}

.table-card {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);

  :deep(.el-table) {
    --el-table-border-color: #e4e7ed;
    --el-table-header-bg-color: #f8f9fa;
    --el-table-row-hover-bg-color: #f5f7fa;

    th.el-table__cell {
      font-size: 14px;
    }

    td.el-table__cell {
      padding: 12px 0;
    }
  }
}

.pagination-card {
  background: #fff;
  padding: 12px 16px;
  border-radius: 8px;
  margin-top: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);

  :deep(.el-pagination) {
    justify-content: flex-end;

    .btn-prev,
    .btn-next,
    .number {
      min-width: 32px;
      height: 32px;
      line-height: 32px;
    }
  }
}

.capacity {
  font-weight: 500;
  color: var(--el-color-primary);
}

.status-tag {
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 14px;
  transition: all 0.2s;

  &:hover {
    transform: scale(1.05);
  }
}
</style>
